<template>
  <div class="home" v-cloak>
    <div class="home-title">{{title}}</div>
    <div class="home-box clearfix">
      <div class="home-contain home-left fl">
        <div class="home-contain-name">主:{{leftHostTeamName}}</div>
        <div class="home-contain-info clearfix">
          <div class="home-contain-info-lef fl">
            <div class="home-contain-info-lef-score">{{leftHostScore}}</div>
            <div class="home-contain-info-lef-vs">vs</div>
            <div class="home-contain-info-lef-score">{{leftGuestScore}}</div>
          </div>
          <div class="home-contain-info-right fl">
            <div class="home-contain-info-right-time clearfix">
              <div class="fl">{{leftCountDownSecond | datetimeFromSeconds('mm')}}</div><div  class="home-contain-info-right-time-colon fl">:</div><div class="fl">{{leftCountDownSecond | datetimeFromSeconds('ss')}}</div>
              <!--{{leftCountDownSecond | datetimeFromSeconds('mm:ss')}}-->
            </div>
            <div class="home-contain-info-right-session">
              第<span class="home-contain-info-right-session-number">{{leftRound}}</span>局
              <!--<span class="home-contain-info-right-session-text">第</span><span class="home-contain-info-right-session-number">{{leftRound}}</span><span class="home-contain-info-right-session-text">局</span>-->
            </div>
          </div>
        </div>
        <div class="home-contain-name">客:{{leftGuestTeamName}}</div>
      </div>
      <div class="home-contain home-right fr">
        <div class="home-contain-name">主:{{rightHostTeamName}}</div>
        <div class="home-contain-info clearfix">
          <div class="home-contain-info-right home-contain-info-right-one fl">
            <div class="home-contain-info-right-time">
              <div class="fl">{{rightCountDownSecond | datetimeFromSeconds('mm')}}</div><div  class="home-contain-info-right-time-colon fl">:</div><div class="fl">{{rightCountDownSecond | datetimeFromSeconds('ss')}}</div>
            </div>
            <!--<div class="home-contain-info-right-time">{{rightCountDownSecond | datetimeFromSeconds('mm:ss')}}</div>-->
            <div class="home-contain-info-right-session">
              第<span class="home-contain-info-right-session-number">{{rightRound}}</span>局
              <!--<span class="home-contain-info-right-session-text">第</span><span class="home-contain-info-right-session-number">{{rightRound}}</span><span class="home-contain-info-right-session-text">局</span>-->
            </div>
          </div>
          <div class="home-contain-info-lef fl home-contain-info-right-two">
            <div class="home-contain-info-lef-score">{{rightHostScore}}</div>
            <div class="home-contain-info-lef-vs">vs</div>
            <div class="home-contain-info-lef-score">{{rightGuestScore}}</div>
          </div>
        </div>
        <div class="home-contain-name">客:{{rightGuestTeamName}}</div>
      </div>
    </div>
    <audio src="./assets/audio/Bye.mp3" id="audio"></audio>
  </div>
</template>
<script>
  import HomeComponent from './scripts/home';
  export default HomeComponent;

</script>

<style lang="scss">
  @import "../assets/scss/variables.scss";
  @import "../assets/scss/mixins.scss";
  @import "../assets/scss/core.scss";
  .home{
    width: 100%;
    height: 100%;
    background-color: #090909;
    padding-top: pxTorem(42px);
    @include sizing;
    font-family: simhei;
    overflow: hidden;
    .home-title{
      width: 100%;
      text-align: center;
      color: #f50a0a;
      font-size: pxTorem(90px);
      height: pxTorem(82px);
      line-height: pxTorem(82px);
      font-size: pxTorem(82px);
    }
    .home-box{
      width: 100%;
      height: pxTorem(914px);
      margin-top: pxTorem(46px);
      border-top: pxTorem(4px) solid #fff;
      @include sizing;
      background-color: #090909;
    }
    .home-contain{
      width: 50%;
      height: pxTorem(914px);
      padding-top: pxTorem(44px);
      padding-left: pxTorem(54px);
      @include sizing;
      .home-contain-name{
        width: 100%;
        color: #fff;
        height: pxTorem(82px);
        line-height: pxTorem(82px);
        font-size: pxTorem(82px);
      }
      .home-contain-info{
        width: 100%;
        height: auto;
        padding-top: pxTorem(90px);
        padding-bottom: pxTorem(90px);
        @include sizing;
        .home-contain-info-lef{
          margin-left: pxTorem(94px);
          .home-contain-info-lef-score{
            text-align: center;
            width: pxTorem(200px);
            color: #f5f50a;
            font-size: pxTorem(220px);
            height: pxTorem(152px);
            line-height: pxTorem(152px);
          }
          .home-contain-info-lef-vs{
            color: #fff;
            font-size: pxTorem(60px);
            text-align: center;
            height: pxTorem(48px);
            line-height: pxTorem(48px);
            margin-top: pxTorem(43px);
            margin-bottom: pxTorem(43px);
          }
        }
        .home-contain-info-right{
          margin-left: pxTorem(160px);
          padding-top: pxTorem(124px);
          .home-contain-info-right-time{
            /*width: pxTorem(360px);*/
            color: #f50a0a;
            font-size: pxTorem(140px);
            height: pxTorem(96px);
            line-height: pxTorem(96px);
          }
          .home-contain-info-right-time-colon{
            line-height: pxTorem(70px);
          }
          .home-contain-info-right-session{
            width: pxTorem(360px);
            margin-top: pxTorem(36px);
            text-align: center;
            color: #fff;
            font-size: pxTorem(60px);
            height: pxTorem(56px);
            line-height: pxTorem(56px);
            .home-contain-info-right-session-number{
              color: #20f50a;
              font-size: pxTorem(60px);
            }
          }
        }
        .home-contain-info-right-one{
          margin-left: pxTorem(94px);
        }
        .home-contain-info-right-two{
          margin-left: pxTorem(148px);
        }

      }
    }
    .home-left{
      border-right: pxTorem(4px) solid #fff;
      @include sizing;
    }
  }
</style>
